<template>
  <div class="login">
    <div class="head">
      <a href="index.html">
        <img src="/static/img/u1.png">
        <span>
          <em>海军战斗文化</em>研练系统</span>
      </a>
    </div>
    <div class="entrance">
      <ul class="entrance-ul">
        <li v-for="item in role"
            :key="item.roleId"
            class="drop-items"
            @click="itemClick(item.roleId)">
          <img :src="item.img">
          <h4>{{item.text}}</h4>
        </li>
      </ul>
    </div>
    <div class="foot">
      <h5>Copyright © 2018 中国人民解放军海军大连舰艇学院</h5>
      <h5>普华基础软件承建 建议使用IE8以上版本浏览器</h5>
    </div>
    <Modal v-model="modal"
           :title="title"
           width="300px"
           :loading="loading"
           @on-ok="asyncOK"
           @on-cancel="cancel">
      <Form ref="formInline"
            :model="formInline"
            :rules="ruleInline">
        <FormItem prop="userName">
          <Input type="text"
                 clearable
                 v-model="formInline.userName"
                 prefix="ios-contact"
                 placeholder="用户名">
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input :type="ifPassword"
                 prefix="ios-lock"
                 v-model="formInline.password"
                 placeholder="密码"
                 @on-enter="asyncOK">
          <Icon :type="iconPass"
                slot="suffix"
                @click="showPassword" />
          </Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { clearLoginInfo } from '@/libs'
export default {
  name: 'LoginForm',
  components: {},
  data () {
    return {
      role: [
        {
          roleId: 3,
          text: '学生入口',
          img: require('./img/pic-stu.png')
        },
        {
          roleId: 2,
          text: '老师入口',
          img: require('./img/pic-tea.png')
        },
        {
          roleId: 4,
          text: '专家入口',
          img: require('./img/pic-exp.png')
        },
        {
          roleId: 1,
          text: '管理员入口',
          img: require('./img/pic-adm.png')
        },
        {
          roleId: 5,
          text: '特邀学员入口',
          img: require('./img/pic-vis.png')
        }
      ],
      modal: false,
      loading: true,
      title: '',
      formInline: {
        userName: '',
        password: ''
      },
      ruleInline: {
        userName: [
          {
            required: true,
            message: '请填写用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请填写密码',
            trigger: 'blur'
          }
          // {
          //   type: 'string',
          //   min: 6,
          //   message: 'The password length cannot be less than 6 bits',
          //   trigger: 'blur'
          // }
        ]
      },
      currentRoleId: 0,
      ifPassword: 'password',
      iconPass: 'md-eye-off'
    }
  },
  mounted () {
    clearLoginInfo();
    this.dropAnimate();
  },
  computed: {},
  methods: {
    ...mapActions(['handleLogin', 'getUserInfo']),
    itemClick (id) {
      this.currentRoleId = id
      switch (id) {
        case 1:
          this.modal = true
          this.title = '管理员登录'
          break
        case 2:
          this.modal = true
          this.title = '老师登录'
          break
        case 3:
          this.modal = true
          this.title = '学生登录'
          break
        case 4:
          this.modal = true
          this.title = '专家登录'
          break
        case 5:
          this.modal = true
          this.title = '特邀学员登录'
          // this.$router.replace({ name: 'home' })
          break
      }
    },
    asyncOK () {
      this.$refs['formInline'].validate(valid => {
        if (valid) {
          this.handleLogin(this.formInline).then(res => {
            this.getUserInfo(this.currentRoleId).then(res => {
              // this.$router.push({
              //   name: this.$config.homeName
              // })
              this.$Message.success('登录成功!')
              this.modal = false
              this.$nextTick(() => {
                this.$router.replace({ name: 'home' })
              })
            }).catch((err) => {
              this.modal = false
              this.$Message.error('请选择正确的角色入口登录')
            })
          }).catch((err) => {
            this.loading = false
            this.$Message.error('用户名或密码错误！')
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    //关闭弹框，清空输入框
    cancel(){
      this.formInline = {
        userName: '',
        password: ''
      }
    },
    //掉落动画
    dropAnimate () {
      TweenMax.staggerTo(document.getElementsByClassName('drop-items'), 4, { top: "30%", opacity: 1, delay: 1, ease: Elastic.easeOut }, 0.25);
    },
    showPassword () {
      if (this.ifPassword == 'password') {
        this.ifPassword = 'text'
        this.iconPass = 'md-eye'
      } else {
        this.ifPassword = 'password'
        this.iconPass = 'md-eye-off'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  background: url(/static/img/bg-login.jpg) no-repeat center center;
  .head {
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    background: #020623;
    a {
      display: inline-flex;
      height: 5vh;
      line-height: 5vh;
      margin-left: 1vw;
      vertical-align: middle;
      img {
        height: 5vh;
        margin-right: 15px;
      }
      span {
        letter-spacing: 2px;
        font-size: 18px;
        color: #fff;
      }
    }
  }
  .entrance {
    width: 100%;
    height: 84vh;
    .entrance-ul {
      position: relative;
      width: 1000px;
      height: 100%;
      margin: 0 auto;
    }
    .drop-items {
      box-sizing: border-box;
      width: 184px;
      height: 200px;
      position: absolute;
      top: -800px;
      opacity: 0;
      text-align: center;
      background: #f7fcff;
      box-shadow: 0 0 10px #eee;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
      img {
        margin-top: 32px;
        height: 95px;
      }
      h4 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: #616161;
        background: #e8f1f8;
        transition: all 0.2s;
      }
      &:hover {
        box-shadow: 0 0 10px #15a4fa;
        h4 {
          color: #fff;
          background: #15a4fa;
        }
      }
      &:first-child {
        left: 0;
      }
      &:nth-child(2) {
        left: 204px;
      }
      &:nth-child(3) {
        left: 408px;
      }
      &:nth-child(4) {
        left: 612px;
      }
      &:last-child {
        left: 816px;
      }
    }
  }
  .foot {
    height: 8vh;
    padding: 1vh 0;
    text-align: center;
    font-size: 12px;
    color: #999;
    background: #4a4b4c;
    h5 {
      height: 3vh;
      line-height: 3vh;
    }
  }
}
</style>